<!DOCTYPE html>
<html lang="en">
<head>
    <title>新增账户</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/dist/plugins/select2/select2.min.css">
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=86e2297f">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=222aea35">
    <style type="text/css">
        .leftFilter {
            float: left;
            text-align: left;
            margin-right: 5px;
        }

        .clickable {
            color: #489EF1;;
            cursor: pointer;
            text-align: left;
            font-weight: bold;
        }

        .td {
            text-align: center;
        }
    </style>
</head>
<body>
<section class="content" id="list">
    <table class="table table-bordered" style="max-width: 750px;margin: -1px 0">
        <thead>
        <tr>
            <th class="td-title" width="140px;">公司名称</th>
            <th class="td-title">账户名称</th>
            <th class="td-title">账户账号</th>
            <th class="td-title">账户初始值</th>
            <th class="td-title">账户用途</th>
            <th class="td-title" width="80px;">使用状态</th>
            <th class="td-title" @click="addAccount()" width="40px;">+</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,index) in list">
            <td class="td-value">
                <select style="width: 100%;float: left;border: none;background: none" v-model="item.fkCompanyId">
                    <option :value="item.companyId" v-for="(item,i) in companyList" >{{item.companyName}}</option>
                </select>
            </td>
            <!--<td v-model="item.companyName" style="text-align: center">{{item.companyName}}</td>-->
            <td class="td-value">
                <input v-model="item.bankName" style="width: 100%;text-align:center;border: none" />
            </td>
            <td class="td-value">
                <input v-model="item.bankCard" style="width: 100%;text-align:center;border: none" />
            </td>
            <td class="td-value">
                <input v-model="item.initMoney" style="width: 100%;text-align:center;border: none" />
            </td>
            <td class="td-value">
                <select style="width: 100%;float: left;border: none;background: none" v-model="item.accountApplication">
                    <option value="一般户" selected>一般户</option>
                    <option value="基本户">基本户</option>
                    <option value="保证金账户">保证金账户</option>
                    <option value="贷款户">贷款户</option>
                    <option value="外币户">外币户</option>
                    <option value="个人户">个人户</option>
                    <option value="POS机户">POS机户</option>
                    <option value="专户">专户</option>
                    <option value="支付宝账户">支付宝账户</option>
                    <option value="微信账户">微信账户</option>
                </select>
            </td>
            <td class="td-value">
                <select style="width: 100%;float: left;border: none;background: none" v-model="item.useStatus">
                    <option value="1" selected>使用中</option>
                    <option value="0">停用</option>
                </select>
            </td>
            <td class="td-value" @click="deleteAccount(index)" style="text-align: center !important;">-</td>
        </tr>
        </tbody>
    </table>

    <div style="height:30px;line-height:30px;text-align: center;z-index:999;padding-top:5px;margin-bottom: 15px">
        <input type="button" value="保存" @click="save()" class="btn oaBtn btn-sm" style="margin-top:5px;">
    </div>
    </div>
    <!-- /.box-body -->
</section>
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=8e743a31"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=54c6b89c"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript" src="/dist/plugins/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script type="text/javascript" src="/dist/plugins/select2/select2.full.min.js"></script>
<script type="text/javascript">
    var api = frameElement.api, W = api.opener;
    Vue.directive('select2', {
        inserted: function (el, binding, vnode) {
            var options = binding.value || {};

            $(el).select2(options).on("select2:select", function (e) {
                el.dispatchEvent(new Event('change', {target: e.target})); //说好的双向绑定，竟然不安套路
            });
        },
        update: function (el, binding, vnode) {
            $(el).trigger("change");
        }
    });
    var app = new Vue({
        el: '#list',
        data: {
            currentUser: getCurrentUser(),
            pageIndex: 1,
            pageCount: 1,
            recordCount: 1,
            list:[
                {
                    id:0,
                    createUserId:getCurrentUser().id,
                    fkCompanyId:getCurrentUser().companyId,
                    bankName:"",
                    bankCard:"",
                    initMoney:"",
                    accountApplication:"一般户",
                    useStatus:"1"
                },
                {
                    id:0,
                    createUserId:getCurrentUser().id,
                    fkCompanyId:getCurrentUser().companyId,
                    bankName:"",
                    bankCard:"",
                    initMoney:"",
                    accountApplication:"一般户",
                    useStatus:"1"
                },
                {
                    id:0,
                    createUserId:getCurrentUser().id,
                    fkCompanyId:getCurrentUser().companyId,
                    bankName:"",
                    bankCard:"",
                    initMoney:"",
                    accountApplication:"一般户",
                    useStatus:"1"
                },
                {
                    id:0,
                    createUserId:getCurrentUser().id,
                    fkCompanyId:getCurrentUser().companyId,
                    bankName:"",
                    bankCard:"",
                    initMoney:"",
                    accountApplication:"一般户",
                    useStatus:"1"
                },
                {
                    id:0,
                    createUserId:getCurrentUser().id,
                    fkCompanyId:getCurrentUser().companyId,
                    bankName:"",
                    bankCard:"",
                    initMoney:"",
                    accountApplication:"一般户",
                    useStatus:"1"
                }
            ],
            time:"",
            PerES: false,
            companyList:[]
        },
        methods: {
            showDatePicker: function (e) {
                var that = this;
                WdatePicker({
                    onpicked: function (dp) {
                        that.time = dp.cal.getNewDateStr();
                        return true;
                    },
                    //dateFmt:'yyyy-MM-dd HH:mm'
                });
                $(e.target).blur();
            },
            query: function(){
                alert(this.time);
            },
            //  新增账户
            addAccount: function (index) {
                this.list.push({
                    id:0,
                    createUserId:getCurrentUser().id,
                    fkCompanyId:getCurrentUser().companyId,
                    bankName:"",
                    bankCard:"",
                    initMoney:"",
                    accountApplication:"一般户",
                    useStatus:"1"
                });
            },
            //  删除账户
            deleteAccount: function (index) {
                this.list.splice(index,1);
            },
            save:function () {
                var newList=[];
                for(var i=0;i<this.list.length;i++){
                    if(this.list[i].bankName!=""||this.list[i].bankCard!=""||this.list[i].initMoney!=""){
                        if(this.list[i].bankName==""){
                            alert("请填写账户名称！");
                            return false;
                        }
                        if(this.list[i].bankCard==""){
                            alert("请填写账户账号！");
                            return false;
                        }
                        if(this.list[i].initMoney==""){
                            alert("请填写账户初始额！");
                            return false;
                        }
                        newList.push(this.list[i]);
                    }
                }
                if(newList.length>0) {
                    $.wyui.postMethod(urlConfig.capital.bankCard.addBankCard, newList, function (r) {
                        alert("添加银行卡账户成功！");
//                        parent.app.query();
                        var $iframe = top.findIframeByName("银行卡账户管理");
                        $iframe[0].contentWindow.app.query();
                        api.close();
                    });
                }else{
                    alert("请至少添加一条银行账户！");
                }
            }
            
        },

        mounted: function () {
            var that=this;
            $.wyui.postMethod(urlConfig.system.user.getCompanyIdsByUserId, {"userId":getCurrentUser().id}, function (r) {
                that.companyList=r;
                for(var i=0;i<that.list.length;i++){
                    that.list[i].fkCompanyId=that.companyList[0].companyId;
                }
            });
        }
    });


</script>

</body>
</html>